<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>航班管理系统</title>
    <meta name="keywords" content="Bootstrap模版,Bootstrap模版下载,Bootstrap教程,Bootstrap中文"/>
    <meta name="description" content="站长素材提供Bootstrap模版,Bootstrap教程,Bootstrap中文翻译等相关Bootstrap插件下载"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!-- basic styles -->

    <link href="/static/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/static/css/bootstrapValidator.min.css"/>
    <link rel="stylesheet" href="/static/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/static/css/ace.min.css"/>
    <link rel="stylesheet" href="/static/css/ace-rtl.min.css"/>
    <link rel="stylesheet" href="/static/css/ace-skins.min.css"/>
    <link rel="stylesheet" href="/static/js/select2/select2.css"/>

    <script src="/static/js/jquery-3.4.1.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/typeahead-bs2.min.js"></script>
    <script src="/static/js/jquery.form.min.js"></script>
    <script src="/static/js/jquery.dataTables.min.js"></script>
    <script src="/static/js/dataTables.bootstrap.min.js"></script>
    <script src="/static/js/jquery.dataTables.bootstrap.js"></script>
    <script src="/static/js/bootstrapValidator.min.js"></script>
    <script src="/static/js/language/zh_CN.js"></script>
    <script src="/static/js/dataTablesi-i18n-zh_cn.js"></script>
    <script src="/static/js/select2/select2.min.js"></script>

    <script type="text/javascript">
        $(function () {
            //渲染表格
            let mytable = $('#mytab').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    url: '/flight/page',
                    //查询条件
                    data: {
                        "fno": "",
                        "type": "",
                        "departureTime": ""
                    }
                },
                "language": i18n_cn,//汉化
                "lengthMenu": [3, 5, 10],//每页多少条
                "sDom": '<"top">rt<"bottom"lp><"clear">',//表格控件布局
                //[]左右空格防止跟tm表达式冲突
                "order": [1, 'asc'],
                "columnDefs": [
                    {
                        targets: [0],
                        data: null,
                        orderable: false,
                        render: function (data, type, row, meta) {
                            return '<input type="checkbox" name="id" value="' + row.id + '">';
                        }
                    },
                    {
                        targets: [1],
                        data: 'fno',
                        orderable: true,
                    },
                    {
                        targets: [2],
                        data: 'type',
                        orderable: true,
                        render: function (data, type, row, meta) {

                            if (data == 0)
                                return '定期航班';
                            else if (data == 1)
                                return '不定期航班';
                            else if (data == 2)
                                return '去程航班';
                            else if (data == 3)
                                return '回程航班';
                            else return '';
                        }
                    },
                    {
                        targets: [3],
                        data: 'departureTime',
                        orderable: true
                    },
                    {
                        targets: [4],
                        data: 'landingTime',
                        orderable: true
                    },
                    {
                        targets: [5],
                        data: 'ano',
                        orderable: true
                    },

                    {
                        targets: [6],
                        data: 'balance',
                        orderable: true
                    },
                    {
                        className: 'queryRoute',//必须加一个样式
                        targets: [7],
                        data: null,
                        orderable: false,
                        render: function (data, type, row, meta) {
                            return '<a href="#">查看航线信息</a>';
                        }
                    }
                ],
            });


            //点击新增按钮
            $("#addBtn").click(function () {
                $("#myModalLabel").html("新增");
                $("#fnoDiv").html('');
                //弹出表单模态窗口
                $('#myModal').modal('show');
            })

            //点击修改按钮
            $("#modBtn").click(function () {
                //判断有没有选中一趟航班
                var $checked = $("#mytab :checkbox[name=id]:checked");
                if ($checked.length != 1) {
                    alert("必须且最多选择一趟航班");
                    return;
                }
                //获取被选中的复选框s所在的行
                let tr = $checked.closest('tr');
                let row = mytable.row(tr);
                //当前行的数据对象
                let f = row.data();
                $("#fnoDiv").html('<label for="fno" class="text-right">航班编号: </label>' +
                    '                        <input id="fno" type="text" class="form-control" name="fno"' +
                    '                               placeholder="必填" required readonly>');
                //表单赋值
                $("#id").val(f.id);
                $("#fno").val(f.fno);
                $("#type option").each(function () {
                    let typeObj = f.type;
                    if (typeObj == $(this).val()) {
                        $(this).prop("selected", "selected");
                    }
                });
                $("#departureTime").val(f.departureTime);
                $("#landingTime").val(f.landingTime);
                $("#ano").val(f.ano);
                $("#balance").val(f.balance);


                $("#myModalLabel").html("修改");
                //弹出表单模态窗口
                $('#myModal').modal('show');
            })

            //复选框全选
            $("#checkall").click(function () {
                $("#mytab tbody :checkbox").prop("checked", $(this).prop("checked"));
            })

            //点击删除按钮
            $("#delBtn").click(function () {
                //判断有没有选中一趟航班
                let $checked = $("#mytab :checkbox[name=id]:checked");
                if ($checked.length < 1) {
                    alert("必须至少选择一趟航班");
                    return;
                }
                let ids = $checked.map(function (index, item) {
                    return $(item).val();
                }).get();
                console.log(ids);
                if (confirm("确定要删除[" + ids + "]吗?")) {
                    $.ajax({
                        url: "/flight/delSomeFlight",
                        type: "DELETE",
                        data: JSON.stringify(ids),
                        contentType: "application/json",
                        dataType: 'json',
                        cache: false,
                        async: true,
                        statusCode: statusCode,
                        success: function (jsonResult) {
                            if ("0" == jsonResult.code) {
                                alert(jsonResult.msg);
                                mytable.ajax.reload();
                            }
                        }

                    })
                }
            })


            //点击查询按钮
            $("#queryBtn").click(function () {
                var fno = $("#fnoconn").val();
                var type = $("#typeconn  option:selected").val();
                var departureTime = $("#departureTimeconn").val();
                if (mytable) {
                    var param = {
                        "fno": fno,
                        "type": type,
                        "departureTime": departureTime,
                    };
                    // console.log(param)
                    //封装参数
                    mytable.settings()[0].ajax.data = param;
                    //重新加载表格
                    mytable.ajax.reload();
                }
            });

            let statusCode = {
                500: function (response) {
                    alert("系统内部异常，请稍后再试")
                },
                400: function (response) {
                    alert("表单参数不合法!")
                    $("#formerrorinfo").html(response.responseJSON.msg)
                },
                403: function (response) {
                    alert("您无权操作该资源!")
                }
            }

            //查询该航线信息并渲染
            function format(data) {
                let childTab = '';
                $.ajax({
                    url: '/flight/queryId/' + data.id,
                    dataType: 'json',
                    async: false,//同步的方式
                    statusCode: statusCode,
                    //请求处理成功,相当于返回码200系列
                    success: function (jsonResult) {
                        console.log(jsonResult.list)
                        if (jsonResult.list[0] == null) {
                            childTab += "没有该航线信息";
                        } else {
                            childTab += '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
                            childTab += "<tr style='color:#4682B4'><td>航线编号</td><td>出发城市</td><td>到达城市</td><td>备注</td></tr>";
                            $.each(jsonResult.list, function (i, e) {
                                childTab += "<tr>";
                                childTab += "<td>" + e.route.rno + "</td>";
                                childTab += "<td>" + e.route.fromCity + "</td>";
                                childTab += "<td>" + e.route.toCity + "</td>";
                                childTab += "<td>" + e.route.remarks + "</td>";
                                childTab += "</tr>";
                            });
                            childTab += "</table>";
                        }

                    }
                });
                return childTab;
            }

            //点击【查看航线信息】
            $('#mytab tbody').on('click', 'td.queryRoute', function () {
                //获取【查看航班】按钮所在的行
                let tr = $(this).closest('tr');
                let row = mytable.row(tr);
                if (row.child.isShown()) {
                    //隐藏
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    let tab = format(row.data());
                    //如果有内容，就展开表格
                    if (tab != '') {
                        //展开
                        row.child(tab).show();
                        tr.addClass('shown');
                    }
                }
            });

            //点击表单的提交按钮
            $('#submitBtn').click(function () {

                //提交的JSON格式数据
                let formParamJson = {
                    "id": $('#id').val(),
                    "fno": $('#fno').val(),
                    "type": $("#type option:selected").val(),
                    "departureTime": $('#departureTime').val(),
                    "landingTime": $('#landingTime').val(),
                    "ano": $('#ano').val(),
                    "balance": $('#balance').val()
                }

                // console.log('formParamJson='+JSON.stringify(formParamJson));
                function restfulSubmit(url, requestMethod) {
                    //提交表单 REST风格
                    $.ajax({
                        url: url,
                        type: requestMethod,
                        data: JSON.stringify(formParamJson),
                        contentType: "application/json;charset=utf-8",
                        dataType: 'json',
                        cache: false,
                        async: false,//同步的方式
                        statusCode: statusCode,
                        success: function (jsonResult) {
                            alert("操作成功!");
                            //重置form
                            $("#modelForm")[0].reset();
                            // $("#id").select2("val", [""]);
                        }
                    });
                }

                if ($("#myModalLabel").html() == "新增") {
                    restfulSubmit("/flight/addFlight", "POST");
                } else if ($("#myModalLabel").html() == "修改") {
                    restfulSubmit("/flight/modFlight/" + $('#id').val(), "PUT");
                }
            });

            //myModal关闭时重置表单
            $('#myModal').on('hidden.bs.modal', function () {
                $("#modelForm")[0].reset();
                // $("#tid").select2("val", [""]);
                //清空表单校验错误提示信息
                $("#formerrorinfo").html("");
                mytable.ajax.reload();
            });
        });
    </script>
</head>
<body>
<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try {
            ace.settings.check('breadcrumbs', 'fixed')
        } catch (e) {
        }
    </script>
    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="#">后台管理</a>
        </li>

        <li>
            <a href="#">航班管理</a>
        </li>
    </ul>
    <div class="row">
        <div class="col-xs-12">
            <div class="result-title">
                <div>
                    <button id="addBtn" class="btn btn-xs btn-primary" type="button">
                        <i class="icon-plus bigger-120"> 新增</i>
                    </button>
                    <button id="modBtn" class="btn btn-xs btn-warning" type="button">
                        <i class="icon-wrench bigger-120"> 修改</i>
                    </button>
                    <button id="delBtn" class="btn  btn-xs btn-danger" type="button">
                        <i class="icon-trash bigger-120"> 删除</i></button>
                    航班编号:<input type="text" id="fnoconn">
                    航班类型:<select id="typeconn">
                                <option value="">请选择</option>
                                <option value="0">定期航班</option>
                                <option value="1">不定期航班</option>
                                <option value="2">去程航班</option>
                                <option value="3">回程航班</option>
                           </select>
                    起飞时间:<input type="date" id="departureTimeconn">
                    <button class="btn btn-xs btn-primary" id="queryBtn" type="button">
                        <i class="icon-search bigger-120"> 查询</i>
                    </button>
                </div>
            </div>
            <div class="table-header">
                航班信息表
            </div>

            <div class="table-responsive">
                <form action="" method="post" id="delForm">
                    <table id="mytab" class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>
                                <div class="center">
                                    <label>
                                        <input type="checkbox" id="checkall" class="ace"/>
                                        <span class="lbl"></span>
                                    </label>
                                </div>
                            </th>
                            <th>航班编号</th>
                            <th>航班类型</th>
                            <th>起飞时间</th>
                            <th>到达时间</th>
                            <th>客机编号</th>
                            <th>票余量</th>
                            <th>操作</th>
                        </tr>
                        </thead>

                        <tbody>

                        </tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>
</div><!-- /.col -->
<div id="infodiv">
</div>
<div class="modal fade" id="myModal" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">新增</h4>
            </div>
            <!--该表单使用Ajax方式提交 -->
            <form id="modelForm" class="form-horizontal" enctype="multipart/form-data" method="post">
                <div class="modal-body">
                    <input id="id" type="hidden" name="id" value="">
                    <div id="fnoDiv" class="form-group">

                    </div>
                    <div class="form-group">
                        <label for="type" class="text-right">航班类型: </label>
                        <select id="type" name="type">
                            <option value="">请选择</option>
                            <option value="0">定期航班</option>
                            <option value="1">不定期航班</option>
                            <option value="2">去程航班</option>
                            <option value="3">回程航班</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="departureTime" class="text-right"> 起飞时间: </label>
                        <input id="departureTime" type="date" name="departureTime" class="form-control"
                               required="required" placeholder="必填"/>
                    </div>
                    <div class="form-group">
                        <label for="landingTime" class="text-right">到达时间: </label>
                        <input id="landingTime" type="date" class="form-control" name="landingTime"
                               placeholder="必填" required>
                    </div>
                    <div class="form-group">
                        <label for="ano" class="text-right">客机编号: </label>
                        <input id="ano" type="text" class="form-control" name="ano"
                               placeholder="必填" required>
                    </div>
                    <div class="form-group">
                        <label for="balance" class="text-right">票余量: </label>
                        <input id="balance" type="text" class="form-control" name="balance"
                               placeholder="必填" required>
                    </div>

                    <div id="formerrorinfo" class="form-group" style="color:red">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="submitBtn" type="button" class="btn btn-primary">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>